<template>
  <div>
    <div class="header-top bg1">
      <div class="wrap header-top-box">
        <div
          :class="{ app_top_active: app_show == 1 }"
          class="fl"
        >
          <img src="@/assets/image/top_APP_icon@2x.png" alt />
          手机APP
          <div v-show="app_show == 1" class="header-app-img">
            <div class="fl">
              <img src="@/assets/image/bg1.jpg" alt />
              Android版
              <i></i>
              <i></i>
            </div>
            <div class="fl">
              <img src="@/assets/image/bg1.jpg" alt />
              IOS版
            </div>
          </div>
        </div>
        <!-- @mouseover="pharmacy_Addres_show = 1"  @mouseout ="pharmacy_Addres_show = 0"  -->
        <div
          :class="{ app_top_active: pharmacy_Addres_show == 1 }"
          style="width:160px"
          class="fl"
        >
          <img src="@/assets/image/top_position_icon@2x.png" alt />
          联众1号药店
          <div v-show="pharmacy_Addres_show == 1" class="header-Pharmacy-addres">
            <div class="h-p-a-top">
              <div
                @click="pharmacy_Addres_search = 0"
                :class="{ pharmacy_Addres_active: pharmacy_Addres_search == 0 }"
              >选择药店</div>
              <div
                @click="pharmacy_Addres_search = 1"
                :class="{ pharmacy_Addres_active: pharmacy_Addres_search == 1 }"
              >搜索药店</div>
              <i></i>
              <img
                @click="pharmacy_Addres_show = 0"
                src="@/assets/image/Persondetails_Popup_Close_icon@2x.png"
                alt
              />
            </div>
            <!-- 药店 选择 -->
            <div v-show="pharmacy_Addres_search == 0" class="search">
              <div v-for="(v, i) in loactionList" :key="i" class="search-list">
                <div class="search-list-min">
                  <div class="fl">
                    <p class="one s-l-m-t">{{ v.shop_name }}</p>
                    <p class="one">{{ v.address }}</p>
                  </div>
                  <div class="fr">详细地址</div>
                </div>
              </div>
            </div>
            <!-- 搜索药店 -->
            <div v-show="pharmacy_Addres_search == 1" class="search">
              <div class="search-top">
                <input type="text" placeholder="请输入店名" />
                <span>搜索</span>
              </div>
              <div class="search-list">
                <div class="search-list-min">
                  <div class="fl">
                    <p class="one s-l-m-t">大数据大数据快点哈数据库的脚奥斯卡的痕迹</p>
                    <p class="one">大数据大的痕迹</p>
                  </div>
                  <div class="fr">详细地址</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="userState == 0" class="fr">
          请
          <span>
            <router-link to="/land">登录</router-link>
          </span>
          或
          <span>
            <router-link to="/land">免费注册</router-link>
          </span>
        </div>
        <div
          @mouseover="userList = 1"
          @mouseout="userList = 0"
          v-if="userState == 1"
          class="fr user"
        >
          <div class="news" @click="lookMessage">消息</div>
          <div class="news" @click="entryPersonal">
            {{ user.user_login }}
            <i class="el-icon-arrow-down"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import AMap from "AMap"; // 引入高德地图
import { getShoplist } from "@/request/public";
import { usergetinfo } from "@/request/user";
import Vue from "vue"
export default {
  data() {
    return {
      app_show: 0, //手机app 二维码下载 显示
      pharmacy_Addres_show: 0, //药店选择 显示隐藏
      pharmacy_Addres_search: 0, // p判断 是不是 在 搜索页面
      lat: -1, //经纬
      lng: -1, //经纬
      loactionList: [], //药店选择
      Pharmacy: [], //药店搜索列表
      userState: 1, // 是否登录
      userList: 1, // 个人列表
      userListActive: -1, // 列表选择
      user: []
    };
  },
  created() {
    Vue.prototype.$token = localStorage.getItem("lzyyToken");
    if (this.$token != undefined) {
      this.start();
    }
  },
  mounted() {
    this.getLocation();
  },
  methods: {
    entryPersonal() {
      // 进入个人中心
      // 进入药师端个人中心
      if (this.$route.fullPath === "/home/pharmacist/index") {
        this.$router.push("/personal/pharmacist/index");
      } else if (this.$route.fullPath === "/home/doctor/index") {
        this.$router.push("/personal/doctor/index");
      } else if (this.$route.fullPath === "/home/expert/index") {
        this.$router.push("/personal/expert/index");
      } else if (this.$route.fullPath === "/home/deployment/index") {
        this.$router.push("/personal/deployment/index");
      } else if (this.$route.fullPath === "/home/check/index") {
        this.$router.push("/personal/check/index");
      }
    },
    lookMessage() {
      // 跳转到个人中心消息页面
      if (this.$route.fullPath === "/home/pharmacist/index") {
        this.$router.push("/personal/pharmacist/index?msg=1");
      } else if (this.$route.fullPath === "/home/doctor/index") {
        this.$router.push("/personal/doctor/index?msg=1");
      } else if (this.$route.fullPath === "/home/expert/index") {
        this.$router.push("/personal/expert/index?msg=1");
      } else if (this.$route.fullPath === "/home/deployment/index") {
        this.$router.push("/personal/deployment/index?msg=1");
      } else if (this.$route.fullPath === "/home/check/index") {
        this.$router.push("/personal/check/index?msg=1");
      }
    },
    Gosearch() {},
    send() {},
    start() {
      usergetinfo({
        token: this.$token
      }).then(res => {
        this.user = res.data;
      });
    },
    location() {
      getShoplist({
        lng: this.lng,
        lat: this.lat
      }).then(res => {
        if (res.data.data != "") {
          this.loactionList = res.data.data;
        }
      });
    },
    getLocation() {
      let Athis = this;
      var map = new AMap.Map("container", {
        resizeEnable: true
      });
      AMap.plugin("AMap.Geolocation", function() {
        var geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, //是否使用高精度定位，默认:true
          timeout: 10000 //超过10秒后停止定位，默认：5s
        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition(function(status, result) {
          if (status == "complete") {
            onComplete(result);
          } else {
            onError(result);
          }
        });
      });
      //解析定位结果
      function onComplete(data) {
        Athis.lat = data.position.lat;
        Athis.lng = data.position.lng;
        Athis.location();
      }
      //解析定位错误信息
      function onError(data) {
        console.log(data);
        // document.getElementById('result').innerHTML = '失败原因排查信息:'+data.message;
      }
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../assets/less/header";
.header-top {
  height: 40px;
  border-bottom: 1px solid #ccc;
  .wrap {
    margin-top: 15px;
  }
}
.wrap.header-top-box {
  margin-top: 0px;
}
</style>
